<style lang="scss">
* {
    margin: 0 auto;
}

.mounte {
    width: 100%;
    height: 736px;
    background-color: #f7f7f7;
}

.top {
    height: 118px;
    margin-top: 20px;
    background-color: #ffffff;

    div {
        float: left;
        width: 120px;
        margin-left: 40px;
        text-align: center;
        font-size: 40px;

        p:nth-child(2) {
            font-size: 14px;
        }
    }
}

.middle {
    width: 100%;
    height: 108px;
    background-color: #ffffff;

    div {
        width: 90%;
        background-color: #f7f7f7;
        font-size: 14px;
        line-height: 22px;

        h4 {
            font-weight: 400;
        }
    }
}

.button {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 999;
    height: 78px;
    text-align: center;

    button {
        text-align: center;
        color: white;
        border: none;
        width: 100%;
        height: 48px;
        background-color: #39d167;
        margin-left: 10px;
    }
}

.send {
    width: 100%;
    height: 281px;
    margin-top: 10px;
    background-color: #ffffff;

    .send-first {
        span:nth-child(2) {
            margin-left: 220px
        }
    }

}
</style>


<template>
    <div class="mounte">

        <div class="top">

            <div>
                <p>--</p>
                <p>心率(次/分)</p>
            </div>

            <div>
                <p>--</p>
                <p>静息心率(次/分)</p>
            </div>

        </div>

        <div class="middle">

            <div>
                <h4>还没有您的心率记录</h4>
                <p>通过智能设备上传或手动录入您的心率数据,看看健康顾问</p>
                <p>怎么说</p>
            </div>

        </div>

        <div class="send">

            <div class="send-first">
                <span>近7日记录</span>
                <span @click="huysd">查看更多记录></span>
            </div>

            <div>
                <div ref="main" style="width: 400px;height:280px;"></div>
            </div>

        </div>
        <div class="button">
            <button>手动录入</button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { flat } from 'vant/lib/utils';
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const main = ref<HTMLElement>()

onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(main.value as HTMLElement);
    // 绘制图表
    myChart.setOption({
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: [250,10,80,120],
                type: 'line'
            }
        ]
    });
})

// 路由跳转
const huysd = () => {
    router.push('/See_more_Bloodpressure')
}


</script>
